<template>
    <div>
      <TitleHeader name="商品分类" btn="添加分类" :event="addcate"></TitleHeader>
      <el-table :data="classlist">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="分类名称" prop="cateName">
              <template  slot-scope="props">
                  <el-input  v-if="!props.row.dis" v-model="props.row.cateName" ></el-input>
                  <p v-else>{{props.row.cateName}}</p>
              </template>
          </el-table-column>
          <el-table-column label="是否启用" prop="id">
             <template slot-scope="props">
              <el-switch v-model="props.row.state"  :disabled="props.row.dis" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
              </template>
         </el-table-column>
          <el-table-column label="操作" width="500"> 
              <template slot-scope="props">
                  <el-button @click="edit(props.row.id)" :type="props.row.dis==true?'':'success'">{{props.row.dis==true?"编辑":'完成'}}</el-button><el-button type="danger" @click="clickdele(props.row.id)">删除</el-button> 
              </template>
               </el-table-column>

      </el-table>
      <div class="block idlist-page">
         <el-pagination @size-change="handleSizeChange" :current-page="currentPage" :page-sizes="pagesizeset" :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total"  @current-change="page"> </el-pagination>
    </div>
    <el-dialog title="添加分类" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <p class="addcate-p">分类名称<el-input class="addcate-input" style="width:300px" placeholder="分类名称" v-model="catename"></el-input></p>
        <p class="addcate-p">是否启用<el-switch class="addcate-input" v-model="addcatestart" active-color="#13ce66" inactive-color="#ff4949"></el-switch></p>
      <span slot="footer" class="dialog-footer" >
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="clickadd">确 定</el-button>
     </span></el-dialog>
    </div>
    
</template>

<script>
import TitleHeader from '../../../components/TitleHeader';
import {getcate,amendcate,delecate,addcate} from '@/apis/goods';
    export default {
        data(){
            return{
                classlist:[],
                switchval: true,
                currentPage: 1,
                pagesize:5,
                pagesizeset:[5, 7],
                total:0,
                dialogVisible: false,
                addcatestart:false,
                catename:''
            }   
        },
        methods:{
            
            page(p){
            this.currentPage=p;
            this.getGoodsList()
          },
          handleSizeChange(i){
            this.pagesize=i;
            this.getGoodsList()
          },
          edit(id){
             let current=this.classlist.filter(v=>v.id==id)[0];
              
            if(current.dis){
                current.dis=false;

            }else{
               current.dis=true;
            //    let state = Number(current.state)
                amendcate({id:id,cateName:current.cateName,state:current.state}).then(res=>{
                    if(res.data.code==0){
                        this.$message({message: '臭臭世界系统提示:修改成功',type: 'success',center: true});
                        this.getGoodsList()
                    }
                })
            }
          },
          getGoodsList(){
              getcate({currentPage:this.currentPage,pageSize:this.pagesize}).then(res=>{
                  for (let v of res.data.data) {
                    v.dis=true;
                    v.state=Boolean(v.state)
                  }
                  this.classlist=res.data.data
                    this.total=res.data.total;
              })
          },
          clickdele(id){
            this.$confirm('此操作将修改此分类, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})
              .then(() => {
                delecate({id:id}).then(res=>{
                    if(res.data.code==0){
                        this.$message({type: 'success',message: '臭臭世界提示:删除成功!',center: true});
                        this.getGoodsList()
                    }else{
                        this.$message({type: 'error',message: '臭臭世界提示:删除失败!',center: true});
                    }
                })

                 })
                 .catch(() => {this.$message({type: 'success',message: '臭臭世界提示:已取消成功',center: true});});  
          },
          addcate(){
               this.dialogVisible = true;
          },
          handleClose() {
        this.$confirm('确认关闭？')
          .then(()=> {
            console.log('成功');
          })
          .catch(()=> {
              console.log('失败');
          });
          },
        clickadd(){
            if(!this.catename){
                this.$message({type: 'error',message: '臭臭世界提示:内容不能为空!',center: true})
                return
            }
            this.$confirm('是否确定添加分类, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})
              .then(() => {
                addcate({cateName:this.catename,state:this.addcatestart}).then(res=>{
                    if(res.data.code==0){
                        this.$message({type: 'success',message: '臭臭世界提示:添加成功!',center: true});
                        this.dialogVisible = false
                        this.getGoodsList()
                         this.addcatestart=false;
                         this.catename='';
                    }else{
                        this.$message({type: 'error',message: '臭臭世界提示:添加失败!',center: true});
                    }
                })
                 })
                 .catch(() => {this.$message({type: 'success',message: '臭臭世界提示:已取消成功',center: true});});  
        }  
        },
        components:{
            TitleHeader,
        },
        created(){
           this.getGoodsList()
        }
    }
</script>

<style lang="less" scoped>
.idlist-page {
  padding: 20px;
  padding-bottom: 0;
}
.addcate-p{
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.addcate-input{
    margin-left: 5px;
    flex: 1;
}
</style>